<template>
  <SysDialog draggable :title="dialog.title" :marginTop="dialog.marginTop" :visible="dialog.visible" :width="dialog.width"
    :height="dialog.height" @onClose="onClose" @onConfirm="confirm">
    <template v-slot:content>
      <!-- 内容组件 -->
      <el-form :model="dialogModel" ref="addAbnormalForm" :rules="rules" label-width="120px" size="default">
        <el-form-item label="异常等级" prop="hazardLevel">
          <el-radio-group v-model="dialogModel.hazardLevel">
            <el-radio :label="1">致命 A</el-radio>
            <el-radio :label="2">严重 B</el-radio>
            <el-radio :label="3">一般 C</el-radio>
            <el-radio :label="4">轻微 D</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="原因分析" prop="causeAnalysis">
          <el-input v-model="dialogModel.causeAnalysis" type="textarea" :autosize="{ minRows: 2, maxRows: 40 }"
            placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="问题描述" prop="description">
          <el-input v-model="dialogModel.description" type="textarea" :autosize="{ minRows: 2, maxRows: 40 }"
            placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="处理说明" prop="treatment">
          <el-input v-model="dialogModel.treatment" type="textarea" :autosize="{ minRows: 2, maxRows: 40 }"
            placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="关联文档">
          <el-button type="primary" class="relation-top" @click="btnAddRelated">请选择</el-button>
          <div v-if="fileValue.length" class="fileCenter">
            <div class="file-container">
              <div class="left">
                {{ fileValue && fileValue[0] && fileValue[0].fileName }}
              </div>
           
            </div>
          </div>
          <div v-else class="fileCenter">暂无数据</div>
        </el-form-item>
      </el-form>
    </template>
  </SysDialog>
  <!-- 异常单关联文件列表 -->
  <addRelated ref="RefAddRelated" :AuditPageList="AuditPageList" @saveRect="saveRect" @saveFile="saveFile"></addRelated>
  <!-- 预览组件 -->
    <!-- <addRelatedRect ref="RefAddReactedRect"></addRelatedRect> -->

</template>

<script setup lang='ts'>
import { nextTick, ref } from 'vue'

import addRelated from './addRelated.vue'
import useDialog from '@/hooks/useDialog';
import useInstance from '@/hooks/useInstance';
import { EditType, Title } from '@/type/BaseEnum';
import { ElForm } from 'element-plus';
import abnormalModel from '@/composables/02Review/01ProjectMan/Abnormal';
import { hazardSaveApi } from '@/api/ReviewBusiness/01Project/project'
import relatedModel from '../modelTs/related'
import { quoteStore } from '@/store/quoteData'
import addRelatedRectModel from '../modelTs/relatedRect'

const store = quoteStore()
const { RefAddRelated, btnAdd } = relatedModel()
const props = defineProps({
  DocumentData: {
    type: Object,
    default: () => { }
  },
  AuditPageList: {
    type: Array,
    default: () => []
  }
})
const { rules, dialogModel, RefAbnormal, clearData } = abnormalModel()
const { dialog, onClose, onShow } = useDialog()
const { global } = useInstance()
const addAbnormalForm = ref<InstanceType<typeof ElForm>>();
const rowValue = ref()
let fileValue = ref([]) as any
const btnAddRelated = () => {
  btnAdd()
  if (fileValue.value.length > 0) {
    nextTick(() => {
      RefAddRelated.value?.resetStyle(fileValue.value)
    })
  }
}
const saveRect = (rect) => {
  console.log(rect, '传递的数据');
  dialogModel.hazardCites = rect && rect.map(item => {
    return item && item[0]
  })
}
const saveFile = (file) => {
  console.log('file');

  fileValue.value = file
}
const emit = defineEmits(['getAbnormalList'])
const confirm = () => {
  // 需要校验
  addAbnormalForm.value?.validate(async isOk => {
    if (isOk) {
      // record_id: this.markData.recordId,
      // stage_id: this.totalStageId
      dialogModel.hazardCites = store.hazardCites
      dialogModel.auditorStageId = props.DocumentData.auditorStageId
      console.log(dialogModel.auditorStageId, props.DocumentData.auditorStageId);

      const res = await hazardSaveApi({ ...dialogModel, recordId: rowValue.value.recordId })
      if (res.code === 200) {
        store.clearData()
        fileValue = []
        global.$message({ message: '新增成功', type: 'success' })
        // 清空数据
        onClose()
        // 需要一个刷新表单
        emit('getAbnormalList')
        clearData()
      }
    }
  })
}
const show = (type: string, row?: any) => {
  rowValue.value = row
  dialog.marginTop = '0vh'
  dialog.width = 750
  dialog.height = 780
  dialog.title = type == EditType.ADD ? Title.ADD : Title.EDIT
  onShow()
  nextTick(() => {
    clearData()
  })
  // 清空表单
  // global.$resetForm(addAbnormalForm.value, dialogModel)
}
defineExpose({
  show
})
</script>
<style scoped lang='scss'>
.relation-top {
  margin-top: 10px;
}

.fileCenter {
  margin-left: 10px;
  text-align: center;
}

.file-container {
  display: flex;
  width: 525px !important;
  justify-content: space-between;
}
</style>